<script setup>
import {getCurrentInstance, reactive, ref} from 'vue'
import axios from "axios";
import webConfig from "@/GlobalParas.js";

let filterUsers = ref([])

let isShowDropdown = ref("none")

let props = defineProps({
  selectedUser: {
    type: Object,
    default: {
      realName: "",
      tableKey: ""
    }
  },
  disableFlag: {
    type: Boolean,
    default: false
  }
})

let emit = defineEmits(["update:selectedUser", "itemChanged"]);

let currentSelectedUser = reactive(props.selectedUser)
if (Reflect.ownKeys(currentSelectedUser).length === 0) {
  currentSelectedUser.realName = "";
  currentSelectedUser.tableKey = "";
}
// console.log(currentSelectedUser.realName);

getUsers()

function getUsers() {
  let paras = {}
  paras.real_name = currentSelectedUser.realName

  axios.post(webConfig.postUrl + "/viewSystemUser/getUsers", paras).then(function (res) {
    filterUsers.value = res.data;
    // console.log(filterUsers);
  })
}

const columns = [
  {
    title: '姓名',
    dataIndex: 'realName',
    width: '15%',
  },
  {
    title: '职务',
    dataIndex: 'title',
    width: '10%'
  },
];
//
// {
//   title: '学历',
//       dataIndex: 'diploma',
//     width: '10%',
// },
// {
//   title: '所在部门',
//       dataIndex: 'deptPath',
// },

function rowClickHandle(rowData) {
  return {
    onClick: () => {
      // console.log(rowData)

      let tempUser = {}
      tempUser.tableKey = rowData.tableKey;
      tempUser.realName = rowData.realName;
      tempUser.diploma = rowData.diploma;
      tempUser.deptPath = rowData.deptPath
      tempUser.title = rowData.title;
      // console.log(tempUser)

      emit("update:selectedUser", tempUser)
      currentSelectedUser = tempUser;

      getUsers();
      // console.log(currentSelectedUser)
      isShowDropdown.value = "none";

      emit("itemChanged", currentSelectedUser)
    },
  }
}

function clearSelectedUser() {
  currentSelectedUser = {}
  // console.log(currentSelectedUser)
  emit("update:selectedUser", {})
  isShowDropdown.value = "none";

  emit("itemChanged", currentSelectedUser)
}
</script>

<template>
  <a-input @change="getUsers"
           v-model:value="currentSelectedUser.realName"
           :disabled="disableFlag"
           @focus="isShowDropdown=''"></a-input>
  <div class="KingAutoComplete_DataContainer" :style="{display: isShowDropdown}">
    <a-table :columns="columns"
             :data-source="filterUsers"
             :pagination="false"
             :customRow="rowClickHandle">
    </a-table>
  </div>
  <div class="KingAutoComplete_CloseButton" @click="clearSelectedUser">
    ×
  </div>
</template>

<style scoped>
.KingAutoComplete_DataContainer {
  overflow-x: hidden;
  overflow-y: auto;
  height: 350px;
  cursor: pointer;
  position: absolute;
  z-index: 999;
  width: 100%;
}

.KingAutoComplete_CloseButton {
  font-family: "宋体", "Times New Roman", Times, serif;
  z-index: 99;
  cursor: pointer;
  position: absolute;
  right: 10px;
  margin-top: -25px;
  color: #8c939d;
  font-weight: bold;
}
</style>